<template>
  <div class="song-list">
    <ul>
      <li v-for="(song,index) in songs" class="item" :key="index" @click="toPlayMusic(song,index)">
        <div class="rank" v-show="rank">
          <span :class="getRankCls(index)">{{getRankTxt(index)}}</span>
        </div>
        <div class="content">
          <h2 class="name">
            <i class="iconfont icon-vip VIP" v-if="!song.url"></i>
            {{song.name}}
          </h2>
          <p class="desc">{{getSongDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import {getMusicVkey} from "../../api/Singer"
import { ERR_OK } from "@/api/config";
export default {
  props: {
    songs: {
      type: Array,
      default: []
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  created() {},
  methods: {
    getSongDesc(song) {
      return `${song.singer}。${song.album}`;
    },
    //将当前点击的歌曲弹出去
    toPlayMusic(song, index) {
        // song.url = this._initMusicVkey(song.mid)
        // console.log(this._initMusicVkey(song.mid))
        // console.log(song)
      if (song.url) {
        this.$emit("toplay", { song: song, index: index });
      } else {
        this.$emit("noplay", "Vip歌曲，是否购买？");
      }
    },
    getRankCls(index) {
      if (index <= 2) {
        return `icon icon${index}`;
      } else {
        return "text";
      }
    },
    getRankTxt(index) {
      if (index > 2) {
        return index + 1;
      }
    },
    //获取歌曲的播放源
    _initMusicVkey(mid) {
       let playUrl = "";
       let Data = ""
      getMusicVkey(mid).then(res => {
         Data = res.req_0;
         console.log(res)
        if (Data.code === ERR_OK && Data.data.midurlinfo[0].vkey != '') {
           playUrl =  Data.data.midurlinfo[0].purl;
        }
      });
       return playUrl
    },
  }
};
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl';
@import '../../common/stylus/mixin.styl';

.song-list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  font-size: $font-size-medium;
}

.item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 64px;
  font-size: $font-size-medium;

  .rank {
    flex: 0 0 25px;
    width: 25px;
    margin-right: 10px;
    text-align: center;

    .icon {
      display: inline-block;
      width: 25px;
      height: 24px;
      background-size: 25px 24px;

      &.icon0 {
        bg-image('first');
      }

      &.icon1 {
        bg-image('second');
      }

      &.icon2 {
        bg-image('third');
      }
    }

    .text {
      color: $color-theme;
      font-size: $font-size-large;
    }
  }

  .content {
    flex: 1;
    line-height: 20px;
    overflow: hidden;

    .name {
      width: 300px;
      no-wrap();
      color: $color-text;

      & .VIP {
        color: $color-theme;
        margin-right: 20px;
      }
    }

    .desc {
      width: 300px;
      no-wrap();
      margin-top: 4px;
      color: $color-text-d;
    }
  }
}
</style>